<template>
	<view class="">
		<view class="box_1">
			<image src="../../static/124.png" mode="" style="width: 100%; height: 100%;"></image>
		</view>
		<view class="box_2">
			<view class="box_3">
				热点
			</view>
		</view>
		<view class="box_4">
			<view class="page-section-spacing">
			    <swiper class="swiper1" indicator-active-color="#0096ff"
			        indicator-dots="true" 
			        autoplay="true" 
			        interval="5000" 
			        duration="1500" 
					   circular>
			        <swiper-item v-for="(item , index) in homeSlide" :key="index">
			            <image :src="item.url" mode="aspectFill" class="img_2"></image>
			        </swiper-item>
			    </swiper>
			</view>
		</view>
		<view class="box_5">
			<view class="box_6" v-for="(item,index) in arr" :key="index">
				<view class="box_7">
					<image :src="item.tu" mode="" class="img_3"></image>
				</view>
				<view class="box_8">
					<view class="box_9">
					  {{item.neirong}}
					</view>
					<view class="box_10">
						<view class="">
							{{item.dizhi}}
						</view>
						<view class="">
							{{item.shijian}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				homeSlide:[],
				arr:[
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-18',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-17',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-16',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-15',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-14',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-13',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-12',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-11',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-10',
					},
					{tu:'../../static/125.png',
					neirong:'转需！郑州市主城区社区生服务中心、乡镇卫生院发热诊室名单及联系方式',
					dizhi:'郑州发布',
					shijian:'2022-12-9',
					},
				]
			}
		},
		onLoad(){
		this.liebiao()	
		},
		methods:{
			liebiao(){
				uni.request({
				    url:"https://goods.zzgoodqc.cn/index.php/index/hao/getImgList",
				    success: (res) => {
				        console.log(res.data.data.data)
						this.homeSlide=res.data.data.data
				    }
				})	
			},
		}
	}
</script>

<style>
//设置轮播的指示点大小
.uni-swiper-wrapper {
    /deep/ .uni-swiper-dots { // 指示点整个区域
        // bottom: 100rpx;
    }
    /deep/ .uni-swiper-dot { // 指示点元素默认样式
        width: 10upx !important;
        height: 10upx !important;
        // border: 1rpx solid #E0B079;
    }
    /deep/ .uni-swiper-dot-active { // 指示点元素激活（当前选中）状态样式
        // background: #CD9763;
    }
}
	.box_10{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 27rpx;
		color: #888888;
	}
	.box_9{
		display: -webkit-box;
		//弹性的盒子
		overflow: hidden;
		//超出文本自动隐藏
		text-overflow: ellipsis;
		//当文本溢出时用省略号表示
		word-wrap: break-word;
		//允许长单词或 URL 地址换行到下一行
		-webkit-line-clamp: 2;
		//显示的行数：3
		-webkit-box-orient: vertical;
		//从上到下垂直排列
	}
	.box_8{
		width: 65%;
		display: flex;
		flex-direction: column;
		justify-content:space-around ;
	}
	.box_7{
		width: 30%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.img_3{
		width: 100%;
		height: 80%;
	}
	.box_6{
		width: 94%;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1rpx solid #ccc;
	}
	.box_5{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.img_2{
	    width: 100%;
	    height: 450rpx;
	}
	.swiper-item uni-bg-red{
			display: flex;
			flex-direction: column;
		}
	.swiper1{
	    height: 450rpx;
	}
	.box_3{
		height: 96%;
		width: 70rpx;
		border-bottom: 7rpx solid red;
		line-height: 80rpx;
		margin-left: 4%;
	}
	.box_2{
		width: 100%;
		
		height: 80rpx;
		color: #666;
		position: sticky;
		top: 100rpx;
		font-size: 32rpx;
		background-size: auto 50%;
		z-index: 100;
		background: #fff;
	}
	.box_1{
		width: 100%;
		height: 100rpx;
		background: red;
		color: #666;
		position: sticky;
		top: 0px;
		font-size: 32rpx;
		background-size: auto 50%;
		z-index: 100;
	}
</style>